<template>
  <div class="index-container">
    <el-card class="card" shadow="never">
      <div slot="header">
        <span>登录信息</span>
        <div style="float: right">登录时间:{{ updateTime }}</div>
      </div>
      <table class="table">
        <tr>
          <td>用户昵称</td>
          <td>{{ user.userName }}</td>
        </tr>
        <tr>
          <td>用户ID</td>
          <td>{{ user.userId }}</td>
        </tr>
        <tr>
          <td>登录账号</td>
          <td>{{ user.phone }}</td>
        </tr>
        <!-- <tr>
          <td>登录权限</td>
          <td>{{ user.roleIds.toString() }}</td>
        </tr> -->
      </table>
    </el-card>
  </div>
</template>

<script>
  import { getUserInfo } from '@/api/user'
  import { parseTime } from '@/utils/index'
  export default {
    name: 'Index',
    data() {
      return {
        timer: 0,
        updateTime: parseTime(new Date()),
        nodeEnv: process.env.NODE_ENV,
        user: {},
      }
    },
    created() {},
    beforeDestroy() {
      clearInterval(this.timer)
    },
    mounted() {
      this.fetchData()
    },
    methods: {
      async fetchData() {
        const { data } = await getUserInfo()
        this.user = data.body
      },
    },
  }
</script>
<style lang="scss" scoped>
  .index-container {
    padding: 0 !important;
    margin: 0 !important;
    background: #f5f7f8 !important;

    ::v-deep {
      .el-alert {
        padding: $base-padding;

        &--info.is-light {
          min-height: 82px;
          padding: $base-padding;
          margin-bottom: 15px;
          color: #909399;
          background-color: $base-color-white;
          border: 1px solid #ebeef5;
        }
      }

      .card {
        ::v-deep {
          .el-card__body {
            .echarts {
              width: 100%;
              height: 305px;
            }
          }
        }
      }

      .bottom {
        padding-top: 20px;
        margin-top: 5px;
        color: #595959;
        text-align: left;
        border-top: 1px solid $base-border-color;
      }

      .table {
        width: 100%;
        color: #666;
        border-collapse: collapse;
        background-color: #fff;

        td {
          position: relative;
          min-height: 20px;
          padding: 9px 15px;
          font-size: 14px;
          line-height: 20px;
          border: 1px solid #e6e6e6;

          &:nth-child(odd) {
            width: 20%;
            text-align: right;
            background-color: #f7f7f7;
          }
        }
      }

      .icon-panel {
        height: 117px;
        text-align: center;
        cursor: pointer;

        svg {
          font-size: 40px;
        }

        p {
          margin-top: 10px;
        }
      }

      .bottom-btn {
        button {
          margin: 5px 10px 15px 0;
        }
      }
    }
  }
</style>
